<template>
	<view class="claim-benefits">
		<view class="relative-box">
			<view class="cards-info">
				<view class="cards-name">
					<text>周卡</text>
					<text class="cards-No">编号123456</text>
				</view>
				<view class="cards-time">
					<view>有效期 2023-12-28</view>
					<view>剩余 <text>7</text> 天</view>
				</view>
			</view>
		</view>
		<!-- <tabs-list :tabList="tabList" :defaultTab="currentTab" :justifyContent="'space-around'"
		@changeTab="changeTab"></tabs-list> -->
		<view class="tab-list">
			<block v-for="(item, index) in tabList" :key="index">
				<view class="tab-item" :class="currentTab == item.id? 'selected-tab' : ''" :key="index" @click="changeTab(item)">
					{{ item.name }}
				</view>
			</block>
		</view>
		<!-- 列表 -->
		<view class="list-box">
			<template v-if="true">
				<block v-for="(item,index) in 6" :key="index">
					<claimItem :key="index" :item="item"></claimItem>
				</block>
			</template>
			<template v-else>
				<empty></empty>
			</template>
		</view>
	</view>
</template>

<script>
	import claimItem from '../components/claim-item/index.vue';
	export default {
		data() {
			return {
				tabList: [{
					id: 1,
					name: '待领取',
					value: 1,
				},{
					id: 2,
					name: '已领取',
					value: 2,
				},],
				currentTab: 1,
			}
		},
		components: {
			claimItem
		},
		methods: {
			changeTab(e){
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.currentTab = e.id;
			}
		}
	}
</script>

<style scoped lang="scss">
@import './claim-benefit.scss';
</style>
